<style>
    .picbtn {
        width: 80px;
        height: 80px;
        background-size: cover;
        border: solid 1px #999;
        float: left;
        margin-left: 5px;
    }

    .del {
        width: 15px;
        height: 15px;
        border: solid 1px #999;
        text-align: center;
        line-height: 15px;
        color: #ff7800;
        position: absolute;
        z-index: 9;
        cursor: pointer;
        margin-left: 62px;
        margin-top: 2px;
    }
</style>
<br/><br/><br/><br/>
<form class="layui-form" action="{:url('editGoodsSave')}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="goods_id" value="{$goods['goods_id']}">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="goods_title" class="layui-input" value="{$goods.goods_title}">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-inline">
                <select name="cid">
                    <option value="">无</option>
                    {foreach $tree as $key=>$vo}
                    <option value="{$vo['id']}" {if $goods.cate.id eq $vo.id} selected="selected"{/if}>{$vo['name']}</option>
                    {/foreach}
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input type="text" name="goods_price" class="layui-input" value="{$goods.goods_price}">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品图片</label>

            <div class="layui-input-block">
                <div style="background: url(/uploads/{$piclist[0]})  center no-repeat;background-size: cover;"
                     class="picbtn">
                    <input type="hidden" value="0" name="del[]">
                    <div class="del">×</div>
                    <input type="file" name="pic[]"
                           style=" filter:alpha(opacity=0); opacity:0; cursor: pointer; width: 100px; height: 100px;">
                </div>
                <div style="background: url(/uploads/{$piclist[1]})  center no-repeat;background-size: cover;"
                     class="picbtn">
                    <input type="hidden" value="0" name="del[]">
                    <div class="del">×</div>
                    <input type="file" name="pic[]"
                           style=" filter:alpha(opacity=0); opacity:0; cursor: pointer; width: 100px; height: 100px;">
                </div>
                <div style="background: url(/uploads/{$piclist[2]})  center no-repeat;background-size: cover;"
                     class="picbtn">
                    <input type="hidden" value="0" name="del[]">
                    <div class="del">×</div>
                    <input type="file" name="pic[]"
                           style=" filter:alpha(opacity=0); opacity:0; cursor: pointer; width: 100px; height: 100px;">
                </div>
                <div style="background: url(/uploads/{$piclist[3]})  center no-repeat;background-size: cover;"
                     class="picbtn">
                    <input type="hidden" value="0" name="del[]">
                    <div class="del">×</div>
                    <input type="file" name="pic[]"
                           style=" filter:alpha(opacity=0); opacity:0; cursor: pointer; width: 100px; height: 100px;">
                </div>
                <div style="background: url(/uploads/{$piclist[4]})  center no-repeat;background-size: cover;"
                     class="picbtn">
                    <input type="hidden" value="0" name="del[]">
                    <div class="del">×</div>
                    <input type="file" name="pic[]"
                           style=" filter:alpha(opacity=0); opacity:0; cursor: pointer; width: 100px; height: 100px;">
                </div>

            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-inline">
                <input type="text" name="stock" class="layui-input" value="{$goods.stock}">
            </div>
        </div>
    </div>

    <script>

        $(document).ready(function () {
            $(".del").click(function () {
                $(this).parent(".picbtn").css("background", "none");
                $(this).next("input").val("");
                $(this).prev("input").val("1");
            });

            $("input[type='file']").on('change', function (e) {
                $(this).prev(".del").prev("input").val(0);
                var img = $(this).parent('.picbtn');
                var file = e.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        img.css({"background": "url(" + e.target.result + ")", "background-size": "cover"});
                    }
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>


    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品详情</label>
            <div class="layui-input-inline">
                <!-- 加载编辑器的容器 -->
                <script id="container" name="detail" type="text/plain">{$goods.detail|raw}</script>

                <!-- 配置文件 -->
                <script type="text/javascript" src="/ue/ueditor.config.js"></script>
                <!-- 编辑器源码文件 -->
                <script type="text/javascript" src="/ue/ueditor.all.js"></script>
                <!-- 实例化编辑器 -->
                <script type="text/javascript">
                    var ue = UE.getEditor('container', {
                        toolbars: [
                            ['source', 'undo', 'redo'],
                            ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', 'simpleupload', 'insertimage', 'insertvideo']
                        ],
                        autoHeightEnabled: false,
                        autoFloatEnabled: true,
                        initialFrameWidth: 834,
                        initialFrameHeight: 400,
                        zIndex: 1,
                    });
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<br/><br/><br/><br/><br/>
